<!--此组件用于小标题-->

<template>
  <div class="title-box">
    <div
      :style="{
        fontSize: fontSize + 'px',
        height: Number(fontSize) + 2 +'px',
        lineHeight: Number(fontSize) + 2 +'px',
        fontWeight: fontWeight,
      }"
      class="title"
    >
      {{ content }}
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Title',
  props: {
    // 传递字体大小
    fontSize: {
      type: [Number, String],
      default: 14,
    },
    // 传递字体粗细
    fontWeight: {
      type: [Number, String],
      default: 400,
    },
    // 传递标题内容
    content: {
      type: String,
      required: true,
    },

  },
};
</script>

<style lang="less" scoped>
  .title-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      border-left: 4px solid #d13a29;
      padding-left: 10px;
      font-weight: 500;
    }
  }

</style>
